/**
 * @description 工具栏：查询组件
 * @author chenyan
 */

import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import Color from '../../../../../css/colors';
import ReactEcharts from 'echarts-for-react';

@Form.create()
class Charts extends React.Component {
  //在render函数调用前判断：如果前后props中的内容不变，通过return false阻止render调用
  shouldComponentUpdate(nextProps, nextState) {
    if (JSON.stringify(nextProps.data) == JSON.stringify(this.props.data)) {
      return false;
    }
    return true;
  }
  render() {
    const { data, xAxis, min, max } = this.props;
    const markLineData = [
      [
        {
          name: xAxis[0],
          xAxis: 0,
          y: 350,
          lineStyle: { opacity: 0, color: '#4a4a4a' },
        },
        { xAxis: 0, y: 350 },
      ],
      [
        {
          name: xAxis[xAxis.length - 1],
          xAxis: xAxis.length,
          y: 350,
          lineStyle: { opacity: 0, color: '#4a4a4a' },
        },
        { xAxis: xAxis.length, y: 350 },
      ],
    ];

    var option = {
      tooltip: {
        trigger: 'item',
        axisPointer: {
          label: {
            backgroundColor: Color.echartItems.tooltipBg,
            color: Color.echartItems.toolLable,
            padding: [7, 7, 5, 7],
          },
        },
        formatter: function (params) {
          if (params && params.value && params.value[0]) {
            var result = '日期：' + xAxis[params.value[0]] + '<br/>';
            result += params.marker + params.value[1];
            return result;
          }
        },
      },
      boundaryGap: 0,
      grid: {
        top: '2%',
        left: 60,
        right: 60,
        bottom: '18%',
      },
      xAxis: [
        {
          type: 'value',
          axisTick: {
            //x轴刻度线
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: Color.echartItems.border,
            },
          },
          min: 0,
          max: xAxis.length - 1,
          axisLabel: {
            show: false,
          },
          splitLine: { show: false }, //去掉垂直网格线
        },
      ],
      yAxis: [
        {
          type: 'value',
          nameTextStyle: {
            // Y轴名称文本样式
            color: '#4a4a4a',
            fontSize: 12,
          },
          axisLine: {
            // Y轴轴线样式
            lineStyle: {
              color: Color.echartItems.border,
            },
          },
          axisTick: {
            // Y轴间隔小线段样式
            show: false,
          },
          axisLabel: {
            // Y轴文本样式
            color: '#4A4A4A',
            fontSize: 12,
          },
          splitLine: {
            // Y轴分割线样式
            show: true, // 仅在左轴添加分割线
            lineStyle: {
              type: 'dashed',
              color: Color.echartItems.border,
            },
          },
          min: min || 0,
          max: max || 100,
        },
      ],
      series: [
        {
          name: '',
          type: 'scatter',
          symbolSize: 5,
          markLine: {
            data: markLineData,
            // 不要动画
            animation: false,
          },
          data: data,
        },
      ],
    };
    return <ReactEcharts option={option} style={{ height: 400, width: '100%', display: 'inline-block' }} theme={'light'} />;
  }
}

export default Charts;
